<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <image
            v-if="!memberStore.userInfo.avatar"
            src="@/static/tabs/noLogin.png"
            class="cu-avatar xl round"
            style="background-color: white"
            mode="scaleToFill"
          />
          <image
            v-if="memberStore.userInfo.avatar"
            :src="memberStore.userInfo.avatar"
            class="cu-avatar xl round"
            mode="widthFix"
          >
          </image>
          <view class="user-info">
            <view class="u_title">
              用户名:{{ memberStore.userInfo.username }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="lims-meList">
      <view>
        所属公司：
        <text>中钢集团郑州精密新材料有限公司</text>
      </view>
      <view>
        <view class="commonSpace">手机</view>号：
        <text>{{ memberStore.userInfo.phone }}</text>
      </view>
      <view>
        <view style="letter-spacing: 50rpx">邮</view>箱：
        <text>{{ memberStore.userInfo.email }}</text>
      </view>
      <view>
        <view style="letter-spacing: 50rpx">部</view>门：
        <text>{{ memberStore.userInfo.dept }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50);

const handleMyRegistration = () => {
  uni.navigateTo({
    url: "/pages/MyRegistration/MyRegistration",
  });
};
const handleApplication = () => {
  uni.navigateTo({
    url: "/pages/MyApplication/MyApplication",
  });
};
function handleClick() {
  uni.reLaunch({
    url: "/pages/AboutPrograms",
  });
}
</script>

<style lang="scss" scoped>
.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    padding: 15px 15px 45px 15px;
    background-color: #3c96f3;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      // .u_title {
      //   font-size: 30rpx;
      // }
    }
  }

  .content-section {
    position: relative;
    top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
.lims-meList {
  padding: 36rpx 48rpx;
  width: 100%;
  height: calc(100vh - 300rpx);
  background-color: #fff;
}

.lims-meList > view {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  width: 100%;
  height: 96rpx;
  border-bottom: 1px solid #eee;
}

.lims-meList > view:last-child {
  border-bottom: 0;
}

.lims-meList > view > image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 24rpx;
}

.lims-meList > view > text {
  flex: 1;
  color: #666;
  text-align: right;
}
.commonSpace {
  letter-spacing: 12rpx;
}
</style>
